<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系人管理器</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div id="find">
        <tr>
            <td>
                <input type="text" id="find_name" placeholder="请输入联系人姓名进行搜索" style="width: 40%;height: 20px;;">
            </td>
            <td>
                <button id="findbt" style="width: 60px;height: 30px;border-radius: 20%;border: 1px solid;">
                    搜索
                </button>
            </td>
        </tr>
        
    </div>
    <!-- 联系人列表板块 列表不为空时-->
    <div id="contacts">
        <!-- tr：行 td：列 th：列-表头单元格 -->
        <table id="contact-list">
            <!-- caption表格标题 -->
            <caption>联系人管理器列表</caption>
            <thead>
                <!-- table row 表格行 -->
                <tr>
                    <th>姓名</th>
                    <th>电话</th>
                    <th>邮箱</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="list">
                <tr>
                    <td>谢濠骏</td>
                    <td>123456789</td>
                    <td>Die-Pig@outlook.com</td>
                    <td class="delbt">
                        <button>删除</button>
                    </td>
                    <td class="revbt">
                        <button>修改</button>
                    </td>
                </tr>
                <tr>
                    <td>谢濠骏克隆1号</td>
                    <td>456123789</td>
                    <td>Smoking-Dog@QQ.com</td>
                    <td class="delbt">
                        <button>删除</button>
                    </td>
                    <td class="revbt">
                        <button>修改</button>
                    </td>
                </tr>
                <tr>
                    <td>谢濠骏克隆2号</td>
                    <td>789123456</td>
                    <td>Pu-Gai-Zai@163.com</td>
                    <td class="delbt">
                        <button>删除</button>
                    </td>
                    <td class="revbt">
                        <button>修改</button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td id="count" colspan="5">联系人个数</td>
                </tr>
            </tfoot>
        </table>
    </div>


    <!-- 修改栏 -->
    <div id="revbox">
        <table id="revlist">
            <tr>
                <td>姓名:</td>
                <td class="inp">
                    <input type="text" id="rev_name" placeholder="请输入联系人姓名">
                </td>
                <td>电话:</td>
                <td class="inp">
                    <input type="text" id="rev_phone" placeholder="请输入联系人电话">
                </td>
                <td>邮箱:</td>
                <td class="inp">
                    <input type="text" id="rev_email" placeholder="请输入联系人邮箱">
                </td>
                <td id="baocun">
                    <button>保存</button>
                </td>
            </tr>
        </table>
    </div>

    <!-- 添加联系人板块 -->
    <div id="addcontact">
        <table id="contact-add">
            <caption>添加联系人</caption>
            <tr>
                <td id="name">姓名:</td>
                <td class="inp">
                    <input type="text" id="form_name" placeholder="请输入联系人姓名">
                </td>
            </tr>
            <tr>
                <td id="phone">电话:</td>
                <td class="inp">
                    <input type="text" id="form_phone" placeholder="请输入联系人电话">
                </td>
            </tr>
            <tr>
                <td id="email">邮箱:</td>
                <td class="inp">
                    <input type="text" id="form_email" placeholder="请输入联系人邮箱">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button id="addbtn">确定添加</button>
                </td>
            </tr>
        </table>
    </div>

    <script src="main.js"></script>
</body>

</html>